<template>
  <div class="nav">
    <el-menu class="el-menu-demo" mode="horizontal">
      <el-menu-item index="1" class="flex" @click="$router.push('/main')">{{middleHandle}}</el-menu-item>
      <el-menu-item
        index="2"
        class="flex1"
        @click="$router.push('/information').catch(()=>{})"
      >{{information}}</el-menu-item>
      <el-menu-item index="3" class="flex2" @click="$router.push('/shopping')">{{shopping}}(移动端）</el-menu-item>
    </el-menu>
    <span @click="$router.push('/learn')" class="learn">learningNotes</span>
    <el-input placeholder="请输入内容" v-model="input" clearable></el-input>
    <i class="peopleInfo" v-if="screenWidth>=750">{{loginInfo}} 欢迎您！</i>
    <i class="peopleInfo-width" v-if="screenWidth>=750">当前页面宽度：{{screenWidth}}px</i>
    <img src="./../../public/logo.jpg" alt class="logo" v-if="screenWidth>=1134" />
    <div :class="{bgc:changBgc}"></div>
    <div :class="{bgc3:changBgc3}" v-for="(item,index) in localtimes" :key="index">
      <p v-show="changBgc3" class="times">{{item}}</p>
    </div>

    <div class="bgc1" @click="changBgc=!changBgc;changBgc3=false"></div>
    <div class="bgc2" @click="changBgc3=!changBgc3;changeBgc=false"></div>
  </div>
</template>
<script>
export default {
  name: "navComponent",
  props: {
    middleHandle: String,
    information: String,
    shopping: String,
  },
  data() {
    return {
      changBgc: false,
      changBgc3: false,
      input: "",
      screenWidth: document.body.clientWidth,
      localtimes: [],
    };
  },
  // html渲染完之后
  mounted() {
    this.time();
    window.addEventListener("resize", () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        this.screenWidth = window.screenWidth;
      })();
    });
  },
  // 这样导致页面会很卡(不停的执行)
  // watch: {
  //   screenWidth(val) {
  //     this.screenWidth = val;
  //   },
  // },
  // 优化
  watch: {
    screenWidth(newValue, oldValue) {
      if (!this.timer) {
        this.screenWidth = newValue;
        this.timer = true;
        setTimeout(() => {
          // that.screenWidth = that.$store.state.canvasWidth
          // console.log(that.screenWidth);
          // that.init();
          this.timer = false;
        }, 400);
      }
      immediate: true;
    },
  },
  methods: {
    time() {
      setInterval(() => {
        let times = new Date().toLocaleString().split("/").slice(2, 3);

        this.localtimes = times;
        // console.log(this.localtimes);
      }, 1000);
    },
  },
  computed: {
    loginInfo() {
      return this.$store.state.isLoginInformation;
    },
  },
};
</script>

<style lang="less" scoped>
.peopleInfo {
  position: absolute;
  top: 0px;
  left: 85%;
  font-size: 12px;
  width: 150px;
  height: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.peopleInfo-width {
  position: absolute;
  top: 18px;
  left: 85%;
  font-size: 12px;
  width: 150px;
  height: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  line-height: 70px;
  padding: 0 0px 0 100px;
  margin: 0 0px 0 10px;
  color: #ffff !important;
  border-radius: 5px;
  background-color: rgb(192, 201, 203);
  z-index: 56575;
  .el-input {
    top: -9px;
    left: 40%;
    width: 30%;
    border: none;
  }
  .el-menu--horizontal > .el-menu-item.is-active {
    color: rgb(203, 59, 117);
    border: 2px solid rgb(220, 202, 202);
    border-radius: 5px;
  }
  .flex {
    top: 0;
    left: 0;
  }
  .flex1 {
    top: -60px;
    left: 78px;
  }
  .flex2 {
    top: -120px;
    left: 162px;
  }

  .el-menu::after,
  .el-menu::before {
    display: none !important;
    content: "";
  }
  .el-menu-item {
    color: #fff;
  }
  .el-menu-demo {
    width: 6%;
    padding-left: 10px;
  }
}
.logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  top: 42px;
  left: 97%;
  transform: translate(-50%, -50%);
  border: 1px dotted #a21381;
}
.bgc {
  position: absolute;
  top: 0px;
  left: -10px;
  font-size: 12px;
  width: 100%;
  background-color: rgba(49, 114, 193, 0.3);
  height: 1000px;
  z-index: -1;
}
.bgc1 {
  position: absolute;
  top: 0px;
  left: -10px;
  font-size: 12px;
  width: 2%;
  height: 100%;
  z-index: -1;
  background-color: rgb(49, 114, 193);
}
.bgc2 {
  position: absolute;
  top: 0px;
  left: 16px;
  font-size: 12px;
  width: 2%;
  height: 100%;
  z-index: -1;
  background-color: rgb(11, 10, 10);
}
.bgc3 {
  position: absolute;
  top: 0px;
  left: -10px;
  font-size: 12px;
  width: 100%;
  background-color: rgb(48, 46, 48);
  height: 1000px;
  z-index: -1;
}
.times {
  text-align: center;
  position: relative;
  top: 260px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 30px;
  width: 500px;
  height: 200px;
}
.learn {
  position: absolute;
  top: -6px;
  left: 406px;
}
</style>